'use client';

import { useEffect, useState } from 'react';
import CustomDropdown from '../CustomDropdown';
import './CustomPagination.scss';

type PagProps = {
  count: number;
  page: number;
  pageSize: number;
  onChange: Fn;
  onChangePageSize: Fn;
};
const CustomPagination = ({
  count,
  page,
  pageSize,
  onChange,
  onChangePageSize,
}: PagProps) => {
  const maxCol = 7,
    halfCol = Math.floor(maxCol / 2);
  const [pn, setPn] = useState<any[]>([]);
  const [dropDownPageList, setDropDownPageList] = useState<any[]>([]);
  const [dropDownSizeList, setDropDownSizeList] = useState<any[]>([]);

  useEffect(() => {
    if (count > maxCol) {
      const plist = Array.from({ length: maxCol }, (_, index) => index + 1);
      plist[maxCol - 1] = count;
      if (page - halfCol > 1) {
        plist[1] = 0;
        for (let n = -1; n <= 1; n++) {
          plist[3 + n] = page + n;
        }
      }
      if (page + halfCol >= count) {
        for (
          let n = maxCol - 2, idx = 1;
          n >= maxCol - 2 - halfCol;
          n--, idx++
        ) {
          plist[n] = count - idx;
        }
      } else {
        plist[maxCol - 2] = 0;
      }
      setPn(plist);
    } else {
      const plist = Array.from({ length: count }, (_, index) => index + 1);
      setPn(plist);
    }

    const allPageList = Array.from({ length: count }, (_, index) => ({
      name: index + 1,
      value: index + 1,
      selected: page == index + 1,
    }));
    setDropDownPageList(allPageList);
    const pageSizeList: any[] = [
      { name: 60, value: 60 },
      { name: 120, value: 120 },
      { name: 200, value: 200 },
    ];
    pageSizeList.forEach(s => (s.selected = s.value == pageSize));
    setDropDownSizeList(pageSizeList);
  }, [count, page, pageSize, maxCol, halfCol]);

  const handleClickPage = (e: any) => {
    const elm = e.currentTarget;
    if (elm) {
      const p = Number(elm.dataset.page);
      onChange && onChange(p);
    }
  };
  const handleJumpPage = (e: any) => {
    if (e) {
      const p = Number(e.value);
      onChange && onChange(p);
    }
  };
  const handleChangePageSize = (e: any) => {
    if (e) {
      const limit = Number(e.value);
      onChangePageSize && onChangePageSize(limit);
    }
  };
  // const handleClickPrevNext = (e: any) => {
  //   const elm = e.currentTarget;
  //   console.log(elm.dataset);
  // };
  // const handleClickNext = (e: any) => {
  //   const elm = e.currentTarget;
  //   console.log(elm.dataset);
  // };
  return (
    <div className="custom-pagination">
      <div className="custom-pagination-list">
        <button
          className={
            'custom-pagination-list-item' + (page > 1 ? ' is-activated' : '')
          }
          {...(page > 1
            ? { onClick: handleClickPage, 'data-page': page - 1 }
            : { disabled: true })}
        >
          <span className="iconfont icon-back-line"></span>
        </button>
        {pn.map((p, idx) => (
          <button
            key={idx}
            className={
              'custom-pagination-list-item' +
              (p > 0 ? ' is-activated' : '') +
              (p == page ? ' is-current' : '')
            }
            {...(p > 0
              ? { onClick: handleClickPage, 'data-page': p }
              : { disabled: true })}
          >
            {p > 0 ? p : <span className="iconfont icon-more"></span>}
          </button>
        ))}
        <button
          className={
            'custom-pagination-list-item' +
            (page < count ? ' is-activated' : '')
          }
          {...(page < count
            ? { onClick: handleClickPage, 'data-page': page + 1 }
            : { disabled: true })}
        >
          <span className="iconfont icon-forward-line"></span>
        </button>
      </div>
      <div className="custom-pagination-jump">
        <span className="custom-pagination-jump-title">Page</span>
        <CustomDropdown options={dropDownPageList} onSelect={handleJumpPage} />
      </div>
      <div className="custom-pagination-pagesize">
        <span className="custom-pagination-pagesize-title">Showing</span>
        <CustomDropdown
          options={dropDownSizeList}
          onSelect={handleChangePageSize}
        />
      </div>
    </div>
  );
};

export default CustomPagination;
